<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            margin: 50px auto;
            width: 200px;
        }

        #box dt {
            width: 200px;
            line-height: 50px;
            height: 50px;
            text-align: center;
            background: #ccc;
            margin-top: 10px;

            position: relative;
        }

        #box dt span {
            position: absolute;
            top: 10px;
            right: 15px;

            display: inline-block;
            height: 30px;
            width: 30px;
            line-height: 30px;
            text-align: center;
            background: #777;
            color: #fff;
        }
        #box dt:hover{
            user-select: none;
        }
        #box dt span:hover {
            background: #555;
            cursor: pointer;
            user-select: none;
        }

        #box dd {
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #eee;
            display: none;
            
        }
    </style>
    <script src="./jquery-1.11.3/jquery.js"></script>
</head>

<body>
    <!-- 1.关于bind()方法与unbind()方法说法正确的是（  C、D  ）选择两项
A bind()方法可用于移除单个或多个事件
B unbind()方法可以同时移除多个事件，但不能移除单个事件
C 使用bind()方法可同时绑定鼠标事件和键盘事件
D unbind()方法是与bind()方法对应的方法

2.若要求隐藏<span>元素，则下列选项正确的是（  A、B、D  ）。多选
A．$(“span”).css(“display”,”none”)
B. $(“span”).addClass(“display”,”none”)
C. $(“span”).show()
D. $(“span”).hide()

3.在JQuery中，关于fadeIn()说法正确的是（B ）
A．可以改变元素的高度
B．可以改变元素的透明度
C．可以改变元素的宽度
D．与fadeIn()相对应的方法是fadeOn() -->

    <dl id="box">
        <dt>苹果<span class="hide">-</span><span class="show">+</span></dt>
        <dd>苹果1</dd>
        <dd>苹果1</dd>
        <dd>苹果1</dd>
        <dt>香蕉<span class="hide">-</span><span class="show">+</span></dt>
        <dd>香蕉1</dd>
        <dd>香蕉1</dd>
        <dd>香蕉1</dd>
        <dt>菠萝<span class="hide">-</span><span class="show">+</span></dt>
        <dd>菠萝1</dd>
        <dd>菠萝1</dd>
        <dd>菠萝1</dd>
        <dt>黄瓜<span class="hide">-</span><span class="show">+</span></dt>
        <dd>黄瓜1</dd>
        <dd>黄瓜1</dd>
        <dd>黄瓜1</dd>
    </dl>
    <script>
    //1、点击一级类别显示对应二级类别。
    //2、展开一个类别的同时，关闭其他类别。
    //3、一级类别展开和关闭的时候，对应的图标也要跟着改变。
    $('.show').click(function(){
        $('.show').css('display','block');
        $(this).closest('dt').nextUntil('dt').stop(true).slideToggle(300);
        $(this).css('display','none').siblings('span').css('display','block').closest('dt').siblings('dt').nextUntil('dt').stop(true).slideUp(300);
    })
    $('.hide').click(function(){
        $(this).css('display','none').siblings('span').css('display','block').closest('dt').nextUntil('dt').stop(true).slideToggle(300);
    })
    
    </script>
</body>

</html>